<template>
  <div class="chatdes">
    <nav>
      <div class="left" @click="back">&lt;</div>
      <div class="friendName">好友昵称</div>
      <div class="about">...</div>
    </nav>
    <main @click="handle"></main>
    <footer>
      <div class="choose">
        <div class="left">
          <img src="../assets/image/ChatDesView/voice.png" />
        </div>
        <div class="container">
          <input v-model="value" type="text" />
        </div>
        <div class="right">
          <span>
            <img src="../assets/image/ChatDesView/emote.png" />
          </span>
          <span @click="handleClick" v-if="!value">
            <img src="../assets/image/ChatDesView/more.png" />
          </span>
          <button v-else>发送</button>
        </div>
      </div>
      <transition name="slide">
        <div class="list" v-show="show">
          <div class="item">
            <img src="../assets/image/ChatDesView/photography.png" />
            <span>相册</span>
          </div>
          <div class="item" @click="takePhoto">
            <img src="../assets/image/ChatDesView/takephoto.png" />
            <span>拍摄</span>
          </div>
          <div class="item">
            <img src="../assets/image/ChatDesView/phone.png" />
            <span>视频通话</span>
          </div>
          <div class="item" @click="map">
            <img src="../assets/image/ChatDesView/place.png" />
            <span>位置</span>
          </div>
          <div class="item">
            <img src="../assets/image/ChatDesView/redpack.png" />
            <span>红包</span>
          </div>
          <div class="item">
            <img src="../assets/image/ChatDesView/money.png" />
            <span>转账</span>
          </div>
          <div class="item">
            <img src="../assets/image/ChatDesView/talk.png" />
            <span>语音输入</span>
          </div>
          <div class="item">
            <img src="../assets/image/ChatDesView/collect.png" />
            <span>我的收藏</span>
          </div>
        </div>
      </transition>
    </footer>
  </div>
</template>

<script>
import eventBus from "./eventbus.js";
export default {
  data() {
    return {
      show: false,
      value: "",
    };
  },
  created() {
    eventBus.$on(
      "location",
      function (data) {
        //赋值给首页的附近医院数据模型
        console.log(data, "dsfsdfsfsfsdfsfsdfs");
      }.bind(this)
    );
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    handle() {
      this.show = false;
    },
    handleClick() {
      this.show = true;
    },
    takePhoto() {
      this.$router.push("/take");
    },
    map() {
      this.$router.push("/map");
    },
  },
};
</script>

<style lang="scss" scoped>
.chatdes {
  width: 100vw;
  height: 100vh;

  background-color: black;
  nav {
    display: flex;
    align-content: space-between;
    position: relative;
    width: 100%;
    height: 45px;
    background-color: rgb(17, 17, 17);
    color: white;
    text-align: center;
    line-height: 45px;

    .left {
      flex: 0 0 10%;
    }
    .friendName {
      flex: 0 0 80%;
    }
    .about {
      flex: 0 0 10%;
    }
  }
  main {
    width: 100%;
    height: 86vh;
    // border: 1px solid darkblue;
  }
  footer {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    .choose {
      display: flex;
      width: 100%;
      height: 45px;
      background-color: #1e1e1e;
      padding: 0 10px;

      div {
        margin: auto;
      }

      .left {
        flex: 0 0 10%;

        img {
          width: 100%;
        }
      }

      .container {
        flex: 0 0 70%;
        // border: 1px brown solid;

        input {
          width: 85%;
          height: 29px;
          overflow: hidden;
          background-color: rgba(128, 128, 128, 0.445);
          border: none;
        }
      }

      .right {
        flex: 0 0 20%;
        display: flex;
        span {
          flex: 1;

          img {
            width: 100%;
          }
        }
        button {
          margin: 0 2px;
          background-color: #05c160;
          color: #fff;
          font-size: 12px;
          border: none;
          border-radius: 5px;
        }
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 100%;
      color: #fff;
      background-color: #1e1e1e;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        height: 80px;
        // margin: auto;
        text-align: center;
        font-size: 12px;
        box-sizing: border-box;
        padding: 10px 0;

        img {
          width: 35px;
        }
        span {
          margin-top: 10px;
        }
      }
    }
  }
  /* 其中样式相同的transition类可以进行和并 */

  .slide-enter,
  .slide-leave-to {
    transform: translateY(400px);
  }

  .slide-enter-active {
    transition: all 0.2s;
  }
  .slide-leave-active {
    transition: all 0.1s;
  }

  .slide-enter-to,
  .slide-leave {
    transform: translateY(0px);
  }
}
</style>